import React, { PureComponent } from 'react';
import { Form, Row, Col, Cascader, DatePicker, Input, Select, Radio, InputNumber, AutoComplete, Upload, Icon, Button, message } from 'antd';
import moment from 'moment';
import { DEFAULT_RESPONE_SUCCESS, DEFAULT_VALID_STATE } from '@/constants';
import styles from './index.less';

const { TextArea } = Input;
const { Option } = Select;

const CONST_FILE_TYPE = [
  'docx',
  'doc',
  'wps'
];

export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      areas: [],
      eventValue: '0',
    };
  }

  componentDidMount() {
    const { form, data = {}, disabled = false } = this.props;
    if (data && data.isEvent == 1) {
      this.setState({ eventValue: data.isEvent }, () => {
        form.setFieldsValue({
          eventType: ['社会安全', '刑事案件'],
          eventAddress: '',
          eventTheTime: moment(),
          // eventCriminal: moment(),
          eventSiuation: '',
        });
      });
    }
  }

  onChangeQKMS = e => {
    this.setState(
      {
        eventValue: e.target.value,
      },
      () => {
        const { form } = this.props;
        const { eventValue } = this.state;
        if (eventValue == '0') {
          form.setFieldsValue({
            eventType: [],
            eventAddress: '',
            eventTheTime: moment(),
            // eventCriminal: moment(),
            eventSiuation: '',
          });
        } else {
          form.setFieldsValue({
            eventType: ['社会安全', '刑事案件'],
            eventAddress: '',
            eventTheTime: moment(),
            // eventCriminal: moment(),
            eventSiuation: '',
          });
        }
      },
    );
  };

  changeValue(vaule) {
    const { leaderList = [], form } = this.props;
    let aaa = leaderList.filter((item, index) => {
      return vaule == item.name
    })
    if (aaa && aaa.length > 0) {
      let arr = aaa[0];
      console.log(arr);
      if (arr && arr.user_duty) {
        form.setFieldsValue({
          leaderLevel: arr.user_duty,
          dutyAddress: arr.unit_address,
          dutyPhone: arr.mobile,
          unitPhone: arr.unit_phone
        });
      } else {
        form.setFieldsValue({
          dutyAddress: arr.unit_address,
          dutyPhone: arr.mobile,
        });
      }
    }
  }

  downLoadBtn() {
    const { dispatch, data, modularName } = this.props;
    dispatch({
      type: `${modularName}/downloadfile`,
      payload: {
        eventallId: data.id,
        fileName: data.originFileName
      }
    });
  }

  render() {
    const { areas = [], eventValue } = this.state;
    const { form, data = {}, disabled = false, leaderList = [], dispatch, file } = this.props;
    const { reportTime, eventTheTime, eventCriminal, eventCreateTime } = data;
    const { getFieldDecorator } = form;
    var nameList = [];
    if (leaderList && leaderList.length > 0) {
      leaderList.map(item => {
        nameList.push(item.name)
      })
    }
    // 上传附件
    const props = {
      accept: CONST_FILE_TYPE.join(','),
      showUploadList: {
        // showDownloadIcon: data.originFileName && data.originFileName.length > 0 ? true : false,
        // showRemoveIcon: disabled ? false : true
        showDownloadIcon: false,
        showRemoveIcon: false
      },
      fileList: file ? [file] : [],
      // defaultFileList: data.originFileName && data.originFileName.length > 0 ? [
      //   {
      //     uid: '1',
      //     name: data.originFileName,
      //   },
      // ] : false,
      onRemove:(file)=> {
        let modularName = this.props.modularName;
        dispatch({
          type: `${modularName}/changeState`,
          payload: {
            file: undefined
          }
        });
      },
      beforeUpload: (file, fileList) => {
        if (file) {
          const { name, type } = file;
          const fileType = name.substring(name.lastIndexOf('.') + 1);
          if (CONST_FILE_TYPE.includes(fileType)) {
            let modularName = this.props.modularName;
            dispatch({
              type: `${modularName}/changeState`,
              payload: {
                file
              }
            });
          } else {
            message.error('不支持的文件类型', 2);
          }
        }
        return false;
      }
    };

    return (
      <Form layout="vertical" className={styles.modalCss}>
        <Row>
          <Col span={2} className={styles.lantiao}></Col>
          <Col span={22} className={styles.jbxx}>
            基本信息
          </Col>
        </Row>
        <Row gutter={16} type="flex" style={{ marginTop: 15 }}>
          <Col span={12}>
            <Form.Item label="上报时间">
              {getFieldDecorator('reportTime', {
                initialValue: reportTime
                  ? moment(reportTime, 'YYYY-MM-DD')
                  : moment().startOf('day'),
                rules: [{ required: true, message: '该项为必填项' }],
              })(<DatePicker disabled />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="情况描述">
              {getFieldDecorator('isEvent', {
                initialValue: data.isEvent || this.state.eventValue,
                rules: [{ required: true, message: '该项为必填项' }],
              })(
                <Radio.Group
                  onChange={this.onChangeQKMS}
                  style={{ marginTop: 5 }}
                  disabled={disabled}
                >
                  <Radio value={'0'}>有突发事件</Radio>
                  <Radio value={'1'}>情况良好</Radio>
                </Radio.Group>,
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16} type="flex" style={{ display: 'none' }}>
          <Col span={12}>
            <Form.Item label="创建时间">
              {getFieldDecorator('eventCreateTime', {
                initialValue: eventCreateTime
                  ? moment(eventCreateTime, 'YYYY-MM-DD HH:mm')
                  : moment().startOf('day'),
              })(<Input disabled={disabled} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="部门">
              {getFieldDecorator('eventCreateUser', {
                initialValue: this.props.eventCreateUser || '',
              })(<Input disabled={disabled} />)}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16} type="flex">
          <Col span={12}>
            <Form.Item label="事件名称">
              {getFieldDecorator('eventTitle', {
                initialValue: data.eventTitle || '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<Input placeholder="请输入事件名称" disabled={disabled} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="事件类型">
              {getFieldDecorator('eventType', {
                initialValue: data.eventType ? data.eventType.split('/') : '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(
                <Cascader
                  options={[
                    {
                      label: '社会安全',
                      value: '社会安全',
                      children: [
                        { label: '刑事案件', value: '刑事案件' },
                        { label: '群体性事件', value: '群体性事件' },
                        { label: '油气供应中断突发事件', value: '油气供应中断突发事件' },
                        { label: '地方政府性债务风险', value: '地方政府性债务风险' },
                        {
                          label: '突发事件人员疏散撤离和避难场所',
                          value: '突发事件人员疏散撤离和避难场所',
                        },
                      ],
                    },
                    {
                      label: '公共卫生',
                      value: '公共卫生',
                      children: [
                        { label: '传染病疫情', value: '传染病疫情' },
                        { label: '群体性不明原因疾病', value: '群体性不明原因疾病' },
                        { label: '急性中毒事件', value: '急性中毒事件' },
                        { label: '食品安全事故', value: '食品安全事故' },
                        { label: '突发药品安全事件', value: '突发药品安全事件' },
                        { label: '突发重大动物疫情', value: '突发重大动物疫情' },
                        { label: '流感大流行', value: '流感大流行' },
                        { label: '重大植物疫情', value: '重大植物疫情' },
                      ],
                    },
                    {
                      label: '事故灾难',
                      value: '事故灾难',
                      children: [
                        { label: '地下空间突发事件', value: '地下空间突发事件' },
                        { label: '海上船舶污染事故', value: '海上船舶污染事故' },
                        { label: '大面积停电事件', value: '大面积停电事件' },
                        { label: '石油天然气管道突发事件', value: '石油天然气管道突发事件' },
                        { label: '突发环境事件', value: '突发环境事件' },
                        { label: '道路交通事故', value: '道路交通事故' },
                        { label: '金融突发事件', value: '金融突发事件' },
                        { label: '火灾事故', value: '火灾事故' },
                        { label: '核与辐射事故', value: '核与辐射事故' },
                        { label: '旅游突发事件', value: '旅游突发事件' },
                        { label: '内河交通事故', value: '内河交通事故' },
                        { label: '水务行业突发事件', value: '水务行业突发事件' },
                        { label: '铁路事故', value: '铁路事故' },
                        { label: '民用航空器事故', value: '民用航空器事故' },
                        { label: '供电事故', value: '供电事故' },
                        { label: '建设工程事故', value: '建设工程事故' },
                        { label: '燃气事故', value: '燃气事故' },
                        { label: '桥梁隧道运行事故', value: '桥梁隧道运行事故' },
                        { label: '危险化学品事故', value: '危险化学品事故' },
                        { label: '轨道交通运营事故', value: '轨道交通运营事故' },
                        { label: '特种设备事故', value: '特种设备事故' },
                        { label: '网络与信息安全事件', value: '网络与信息安全事件' },
                        { label: '生产安全事故灾难', value: '生产安全事故灾难' },
                        { label: '海上搜救', value: '海上搜救' },
                        { label: '工贸行业事故情', value: '工贸行业事故情' },
                      ],
                    },
                    {
                      label: '自然灾害',
                      value: '自然灾害',
                      children: [
                        { label: '空气重污染', value: '空气重污染' },
                        { label: '海洋灾害', value: '海洋灾害' },
                        { label: '气象灾害', value: '气象灾害' },
                        { label: '地质灾害', value: '地质灾害' },
                        { label: '地震', value: '地震' },
                        { label: '防汛防台', value: '防汛防台' },
                        { label: '水旱灾害', value: '水旱灾害' },
                        { label: '雨雪冰冻', value: '雨雪冰冻' },
                      ],
                    },
                    {
                      label: '其他',
                      value: '其他',
                    },
                  ]}
                  placeholder="请选择事件类型"
                  size="large"
                  disabled={disabled}
                />,
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16} type="flex" style={eventValue == 0 ? {} : { display: 'none' }}>
          <Col span={12}>
            <Form.Item label="事发地点">
              {getFieldDecorator('eventAddress', {
                initialValue: data.eventAddress || '',
                rules: [{ required: eventValue === '0', message: '该项为必填项' }],
              })(<Input placeholder="请输入事件地点" disabled={disabled} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="事发时间">
              {getFieldDecorator('eventTheTime', {
                initialValue: eventTheTime ? moment(eventTheTime, 'YYYY-MM-DD HH:mm') : '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<DatePicker disabled={disabled} showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" />)}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16} type="flex" style={eventValue == 0 ? {} : { display: 'none' }}>
          <Col span={12}>
            <Form.Item label="所属区域">
              {getFieldDecorator('streetName', {
                initialValue: data.streetName || '',
                rules: eventValue == 0 ? [{ required: true, message: '该项为必填项' }] : false,
              })(
                <Select placeholder="请选择" disabled={disabled}>
                  <Option value="新华路街道" key="xh">
                    新华路街道
                  </Option>
                  <Option value="江苏路街道" key="js">
                    江苏路街道
                  </Option>
                  <Option value="华阳路街道" key="hy">
                    华阳路街道
                  </Option>
                  <Option value="周家桥街道" key="zjq">
                    周家桥街道
                  </Option>
                  <Option value="天山路街道" key="ts">
                    天山路街道
                  </Option>
                  <Option value="仙霞新村街道" key="xx">
                    仙霞新村街道
                  </Option>
                  <Option value="虹桥街道" key="hq">
                    虹桥街道
                  </Option>
                  <Option value="程家桥街道" key="cjq">
                    程家桥街道
                  </Option>
                  <Option value="北新泾街道" key="bxj">
                    北新泾街道
                  </Option>
                  <Option value="新泾镇" key="xjz">
                    新泾镇
                  </Option>
                  <Option value="虹桥临空经济园区" key="lk">
                    虹桥临空经济园区
                  </Option>
                  <Option value="其他" key="qt">
                    其他
                  </Option>
                </Select>,
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            {/* <Form.Item label="接报时间">
              {getFieldDecorator('eventCriminal', {
                initialValue: eventCriminal ? moment(eventCriminal, 'YYYY-MM-DD HH:mm') : '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<DatePicker showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" />)}
            </Form.Item> */}
          </Col>
        </Row>
        <Form.Item label="事件描述">
          {getFieldDecorator('eventBrief', {
            initialValue: data.eventBrief || '',
            rules: [{ required: true, message: '该项为必填项' }],
          })(<TextArea rows={4} placeholder="请输入事件描述" disabled={disabled} />)}
        </Form.Item>
        <Form.Item label="应对情况" style={eventValue == 0 ? {} : { display: 'none' }}>
          {getFieldDecorator('eventSiuation', {
            initialValue: data.eventSiuation || '',
            rules: [{ required: eventValue === '0', message: '该项为必填项' }],
          })(<TextArea rows={4} placeholder="请输入应对情况" disabled={disabled} />)}
        </Form.Item>

        <Row>
          <Col span={2} className={styles.lantiao}></Col>
          <Col span={22} className={styles.jbxx}>
            保障力量
          </Col>
        </Row>
        <Row gutter={16} type="flex" style={{ marginTop: 15 }}>
          <Col span={12}>
            <Form.Item label="值班部门">
              {getFieldDecorator('eventSubordinateUnit', {
                initialValue: data.eventSubordinateUnit ? data.eventSubordinateUnit : this.props.eventCreateUser,
                rules: [{ required: true, message: '该项为必填项' }],
              })(<Input disabled></Input>)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="值班领导">
              {getFieldDecorator('dutyLeader', {
                initialValue: data.dutyLeader || '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<AutoComplete
                disabled={disabled}
                dataSource={nameList}
                placeholder="请选择值班领导"
                filterOption={(inputValue, option) =>
                  option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                }
                onChange={this.changeValue.bind(this)}
              />)}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16} type="flex">
          <Col span={12}>
            <Form.Item label="领导职务">
              {getFieldDecorator('leaderLevel', {
                initialValue: data.leaderLevel || '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<Input placeholder="请输入领导职务" disabled={disabled} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="值班地址">
              {getFieldDecorator('dutyAddress', {
                initialValue: data.dutyAddress || '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<Input placeholder="请输入值班地址" disabled={disabled} />)}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16} type="flex">
          <Col span={12}>
            <Form.Item label="联系电话">
              {getFieldDecorator('dutyPhone', {
                initialValue: data.dutyPhone || '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<Input placeholder="请输入联系电话" disabled={disabled} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="值班固话">
              {getFieldDecorator('unitPhone', {
                initialValue: data.unitPhone || '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<Input placeholder="请输入值班固话" disabled={disabled} />)}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16} type="flex">
          <Col span={12}>
            <Form.Item label="保障人数">
              {getFieldDecorator('securitySize', {
                initialValue: data.securitySize || '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<InputNumber min={1} disabled={disabled} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="填报人员">
              {getFieldDecorator('spotMan', {
                initialValue: data.spotMan || '',
                rules: [{ required: true, message: '该项为必填项' }],
              })(<Input placeholder="请输入填报人员" disabled={disabled} />)}
            </Form.Item>
          </Col>
        </Row>
        <Row style={eventValue == 0 ? {} : { display: 'none' }}>
          <Col span={2} className={styles.lantiao}></Col>
          <Col span={22} className={styles.jbxx}>
            添加附件
          </Col>
        </Row>
        <Row gutter={16} type="flex" style={eventValue == 0 ? {} : { display: 'none' }}>
          <Col span={12} style={!data.id ? { marginTop: 10 } : { marginTop: -23 }}>
            <Form.Item>
              <Upload {...props}>
                <Button style={!data.id ? {} : { display: 'none' }}><Icon type="upload" />上传文件</Button>
              </Upload>
            </Form.Item>
          </Col>
          <Col span={12} style={{ marginTop: 10, height: 30 }}>
            <Button
              icon="cloud-download"
              className={styles.common_btn_type_orange}
              style={data.originFileName && data.originFileName.length > 0 && disabled ? { float: "right" } : { display: "none" }}
              onClick={this.downLoadBtn.bind(this)}
            >
              下载附件
            </Button>
          </Col>
        </Row>

      </Form>
    );
  }
}
